<template>  
  <div class="responsive-repair-orders">  
    <!-- 引入报修工单的修复工单组件 -->  
    <div class="repair-orders">  
      <!-- 标题部分 -->  
      <div class="header">  
        <div class="title">报修工单</div>  
        <div class="status-bar"></div>  
      </div>  

      <!-- 饼状图部分 -->  
      <div class="chart-container">  
        <div ref="repairChart" class="chart"></div>  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
import * as echarts from "echarts";  

export default {  
  name: "ResponsiveRepairOrders",  
  data() {  
    return {  
      myChart: null, // 定义图表实例  
    };  
  },  
  mounted() {  
    this.$nextTick(() => {  
      this.initChart();  
      window.addEventListener("resize", this.handleResize); // 监听窗口大小变化  
    });  
  },  
  beforeDestroy() {  
    window.removeEventListener("resize", this.handleResize); // 移除监听器  
    if (this.myChart) {  
      this.myChart.dispose(); // 销毁图表实例，避免内存泄漏  
    }  
  },  
  methods: {  
    initChart() {  
      const chartDom = this.$refs.repairChart;  
      this.myChart = echarts.init(chartDom);  

      const option = {  
        tooltip: {  
          trigger: "item",  
          formatter: "{a} <br/>{b}: {c} 处 ({d}%)",  
        },  
        series: [  
          {  
            name: "报修工单",  
            type: "pie",  
            radius: ["50%", "70%"],  
            label: {  
              show: true,  
              formatter: "{b}: {c} 处",  
              fontSize: 12,  
              color: "#fff",  
            },  
            labelLine: {  
              length: 10,  
              length2: 15,  
              lineStyle: { color: "#fff" },  
            },  
            data: [  
              { value: 45, name: "待维修", itemStyle: { color: "#ff7f50" } },  
              { value: 30, name: "新报修", itemStyle: { color: "#87cefa" } },  
              { value: 25, name: "已修好", itemStyle: { color: "#32cd32" } },  
            ],  
          },  
        ],  
      };  

      this.myChart.setOption(option);  
    },  
    handleResize() {  
      if (this.myChart) {  
        this.myChart.resize(); // 根据父元素调整图表大小  
      }  
    },  
  },  
};  
</script>  

<style scoped>  
.responsive-repair-orders {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  width: 100%; /* 容器宽度占满 */  
  height: auto; /* 自适应高度 */  
  padding: 20px;  
  box-sizing: border-box;  
}  

.repair-orders {  
  width: 100%;  
  max-width: 330px; /* 设置图表的最大宽度 */  
  padding: 15px 20px;  
  border-radius: 14px;  
  background: linear-gradient(145deg, rgba(8, 20, 40, 0.98), rgba(10, 30, 60, 0.9));  
  border: 1px solid rgba(0, 255, 255, 0.4);  
  box-shadow: 0 0 20px rgba(0, 183, 255, 0.4);  
}  

.header {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  margin-bottom: 20px;  
}  

.title {  
  font-size: 18px;  
  color: #00baff;  
  font-weight: bold;  
}  

.status-bar {  
  height: 4px;  
  width: 100px;  
  background: linear-gradient(to right, #ff7f50, #32cd32, #00aaff);  
  border-radius: 2px;  
}  

.chart-container {  
  width: 100%;  
  height: 200px;  
  position: relative;  
  overflow: hidden;  
}  

.chart {  
  width: 100%;  
  height: 100%;  
}  
</style>